<template>
  <div class="write" v-if="show_page">
    <div class="_2v5v5">
      <div class="_3zibT">
        <router-link to="/">回首页</router-link>
      </div>
      <div class="_1iZMb">
        <div class="_33Zlg" @click="collection_form=!collection_form"><i class="fa fa-plus"></i><span>新建文集</span></div>
        <div class="_2G97m">
          <form class="M8J6Q" :class="collection_form?'_2a1Rp':'_1mU5v'">
            <input type="text" placeholder="请输入文集名..." name="name" class="_1CtV4" v-model="collection_name">
            <button type="submit" class="dwU8Q _3zXcJ _3QfkW" @click.stop="create_collection"><span>提 交</span></button>
            <button type="button" class="vIzwB _3zXcJ" @click="collection_form=false"><span>取 消</span></button>
          </form>
        </div>
      </div>
      <ul class="_3MbJ4 _3t059">
        <li class="_3DM7w " :class="key==current_collection?'_31PCv':' '" @click="current_collection=key"
            :title="collection" v-for="collection,key in collection_list">
          <div class="_3P4JX _2VLy-" v-if="current_collection==key" @click.stop="is_show_menu=!is_show_menu">
            <i class="fa fa-gear"></i>
            <span>
              <ul class="_2V8zt _3FcHm _2w9pn" :class="is_show_menu?'NvfK4':' '">
                <li class="_2po2r cRfUr" title=""
                    @click.stop.prevent="change_collection(collection.id,collection.name)">
                  <span class=""><i class="fa fa-pencil-square-o _22XWG"></i>修改文集</span>
                </li>
                <li class="_2po2r cRfUr" title="" @click.prevent.stop="del_collection(collection.id,collection.name)">
                  <span class=""><i class="fa fa-trash-o _22XWG"></i>删除文集</span>
                </li>
              </ul>
            </span>
          </div>
          <span>{{collection.name}}</span>
        </li>
      </ul>
      <div style="height: 50px;"></div>
      <div role="button" class="h-5Am">
        <span class="ant-dropdown-trigger"><i class="fa fa-bars"></i><span>设置</span></span>
        <span class="Yv5Zx">遇到问题<i class="fa fa-question-circle-o"></i></span>
      </div>
    </div>
    <div class="rQQG7">
      <div class="_3revO _2mnPN">
        <div class="_3br9T">
          <div>
            <div class="_1GsW5" @click="add_article(true)"><i class="fa fa-plus-circle"></i><span> 新建文章</span></div>
            <ul class="_2TxA-">
              <li class="_25Ilv " title="article.title" :class="current_article==key?'_33nt7':' '"
                  v-for="article,key  in article_list" @click="current_article=key">
                <!--                文章发布状态-->
                <i class="_13kgp _2m93u"></i>
                <div class="_3P4JX poOXI" v-if="key==current_article"
                     @click.stop.prevent="is_show_article_menu=!is_show_article_menu">
                  <i class="fa fa-gear"></i>
                  <span>
                    <ul class="_2V8zt _3FcHm _2w9pn" :class="is_show_article_menu?'NvfK4':''">
                      <li class="_2po2r cRfUr" v-if="!article.is_public"
                          @click="public_article(article.id)"><span class=""><i
                        class="fa fa-share _22XWG"></i>直接发布</span></li>
                      <li class="_2po2r cRfUr" v-else @click="public_article(article.id)"><span class=""><i
                        class="fa fa-share _22XWG"></i>设置为隐藏发布</span></li>
                      <li class="_2po2r cRfUr" title="" @click="is_show_time_chose=!is_show_time_chose"><span
                        class=""><i
                        class="fa fa-clock-o _22XWG"></i>定时发布</span></li>
                      <li class="_2po2r cRfUr" title=""><span class="_20tIi"><i class="iconfont ic-paid _22XWG"></i>发布为付费文章</span></li>
                      <li class="_2po2r cRfUr" title=""><span class=""><i
                        class="iconfont ic-set _22XWG"></i>设置发布样式</span></li>
                      <li class="_3nZXj _2_WAp _3df2u _2po2r cRfUr" title=""><span class=""><i
                        class="fa fa-folder-open _22XWG"></i>移动文章
                        <div class="_3x4X_">
                          <ul class="_2KzJx oGKRI _3DXDE _2w9pn">
                            <li class="_2po2r cRfUr" v-if="key!=current_collection"
                                v-for="collection,key in collection_list"
                                @click="move_article(article.id,collection.id)"><span
                              class="">{{collection.name}}</span></li>
                          </ul>
                        </div>
                      </span>
                      </li>
                      <li class="_2po2r cRfUr" title=""><span class=""><i
                        class="fa fa-history _22XWG"></i>历史版本</span></li>
                      <li class="_2po2r cRfUr" title="" @click="delte_article(article.id)"><span class=""><i
                        class="fa fa-trash-o _22XWG"></i>删除文章</span></li>
                      <li class="_2po2r cRfUr" title=""><span class=""><i
                        class="fa fa-ban _22XWG"></i>设置禁止转载</span></li>
                    </ul>
                  </span>
                </div>
                <span class="NariC">{{article.title}}</span>
                <span class="hLzJv" v-if="article.content">{{article.content.substr(0,20)}}</span>
                <span class="_29C-V" v-if="article.content">>字数：{{article.content.length}}</span>
                <span class="_29C-V" v-else>字数：0</span>
              </li>
            </ul>
            <div class="_2cVn3" @click="add_article(false)"><i class="fa fa-plus"></i><span> 在下方新建文章</span></div>
          </div>
        </div>
      </div>
      <input type="text" class="_24i7u" v-model="editorTitle">
      <div id="editor">
        <mavon-editor
          style="height: 100%"
          v-model="editorContent"
          :ishljs="true"
          ref=md
          @change="change_content"
          @save="save_article"
          @imgAdd="imgAdd"
          @imgDel="imgDel"
        ></mavon-editor>
      </div>
    </div>
    <div class="interval_box" style="" v-if="is_show_time_chose">
      <transition name="el-fade-in-linear">
        <div class="transition-box">
          <div class="_2tIvb">
            <div class="ZTNas" aria-label="Close"><i class="fa fa-close"></i></div>
            <div class="_1KgC3">
              <div class="-K8Re">定时发文</div>
            </div>
            <div class="_1LROK PWCkH">
              <div class="wzwGh">选择定时发文的时间：</div>
              <div class="On4jq">
                <el-date-picker
                  v-model="pub_date"
                  type="datetime"
                  format="yyyy-MM-dd HH:mm"
                  placeholder="选择日期时间">
                </el-date-picker>
              </div>
              <div class="_3mEYS">本文章将于<span class="yfqan">{{timeformat(pub_date)}}</span>发布。
              </div>
            </div>
            <div class="RzhZ5 pCffa">
              <button type="button" class="_3zXcJ" @click="is_show_time_chose=flase"><span>取 消</span></button>
              <button type="button" class="_3zXcJ _3QfkW" @click="pub_time"><span>确 认</span></button>
            </div>
          </div>

        </div>
      </transition>
    </div>

  </div>
</template>
<script>
    import {mavonEditor} from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    import '../../../static/font-awesome/css/font-awesome.css'

    export default {
        name: "Writer",
        data() {
            return {
                editorTitle: "",
                editorContent: "",
                editorRender: "",
                img_file: [],
                collection_form: false,
                show_page: false,
                collection_list: [],
                article_list: [],
                token: "",
                current_collection: 0,
                current_article: 0,
                is_show_menu: false,
                is_show_article_menu: false,
                is_show_time_chose: false,
                collection_name: "",
                article_title: new Date().toLocaleDateString().split("/").join('-'),
                pub_date: new Date().toLocaleDateString(),
                timmer: null,
            }
        },
        watch: {
            editorTitle() {
                console.log(this.editorTitle)
                this.int_save_article()
            },
            current_collection() {
                this.is_show_menu = false
                this.get_article()
            },
            current_article() {
                this.editorTitle = this.article_list[this.current_article].title
                this.editorContent = this.article_list[this.current_article].content || ""
            }
        },
        mounted() {
            if (this.show_page) {
                document.querySelector("#editor").style.height = document.documentElement.clientHeight - document.querySelector("._24i7u").clientHeight + "px";
            }
        },
        components: {
            mavonEditor
        },
        methods: {
            // 绑定@imgAdd event
            imgAdd(filename, $file){
           // 把富文本编辑器中的图片上传到服务端，因为服务端使用了docker部署的FastDFS，所以一定要检查nginx容器是否启动了
           var formdata = new FormData();
           formdata.append('image', $file);
           // formdata.append('title', '新增数据');
           // formdata.append('title', '新增数据');
           this.$axios.post(`${this.$settings.Host}/article/image/`,formdata,{
               headers: {
                 'Content-Type': 'multipart/form-data',
                 Authorization: "jwt " + this.token,
               },
           }).then(response => {
               // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
               this.$refs.md.$img2Url(filename, response.data.image);
           });
          },
            imgDel(filename) {
              // 删除文件
              delete this.img_file[filename];  // 前段删除,一般服务端不删除
              this.$refs.toolbar_left.$imgDelByFilename(filename);
              // 发送ajax删除后端图片

          },
            check_user() {
                let tokenvm = localStorage.user_token || sessionStorage.user_token
                if (tokenvm) {
                    this.show_page = true
                    this.token = tokenvm
                } else {
                    this.$confirm('是否登陆后继续操作', '别急吧瞎点', {
                        confirmButtonText: '去登陆',
                        cancelButtonText: '返回首页',
                        type: 'info'
                    }).then(() => {
                        // 前往个人中心
                        this.$router.push("/login");
                    }).catch(() => {
                        // 返回站点首页
                        this.$router.push("/");
                    });
                }
            },
            show_collection_list() {
                this.$axios.get(`${this.$settings.Host}/article/collection/`, {
                    headers: {
                        Authorization: "jwt " + this.token,
                    }
                }).then(response => {
                    this.collection_list = response.data
                    this.get_article()
                }).catch(
                    error => {
                        this.$message.error("获取失败请稍后再试")
                    }
                )
            },
            create_collection() {
                this.$axios.post(`${this.$settings.Host}/article/collection/`, {
                    name: this.collection_name
                }, {
                    headers: {
                        Authorization: "jwt " + this.token,
                    }
                }).then(response => {
                    this.$message.success("新增成功")
                    this.collection_name = ""
                    this.collection_form = false
                }).catch(error => {
                    this.$message.error("添加失败")
                })
            },
            del_collection(id, collection_name) {
                this.is_show_menu = false
                this.$confirm(`确认要删除当前文集《${collection_name}》吗？`, '危险操作', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 确认删除
                    this.$axios.delete(`${this.$settings.Host}/article/collection/${id}/`, {
                        headers: {
                            Authorization: "jwt " + this.token,
                        }
                    }).then(response => {
                        this.$message.success("成功删除当前文集！");
                        // 客户端从文集列表移除当前文集，并重置当前操作的文集ID为0
                        this.collection_list.splice(this.current_collection, 1);
                        this.current_collection = 0;
                    }).catch(error => {
                        this.$message.error("删除文集失败！");
                    });

                }).catch(() => {
                    // 取消

                });
            },
            change_collection(collection_id, collection_name) {
                this.is_show_menu = false
                // 显示修改文集名称的弹窗
                this.$prompt('请输入新的文集名称', '修改文集', {
                    confirmButtonText: '更新',
                    cancelButtonText: '取消',
                    inputValidator(val) {
                        if (val == collection_name) {
                            return "对不起，文集名称没有进行修改！";
                        }
                    },
                }).then(({value}) => {
                    // 发送ajax请求服务端修改文集名称
                    this.$axios.put(`${this.$settings.Host}/article/collection/${collection_id}/`, {
                        name: value,
                    }, {
                        headers: {
                            Authorization: "jwt " + this.token,
                        }
                    }).then(response => {
                        this.collection_list[this.current_collection].name = value;
                    }).catch(error => {
                        // 取消不需要做任何事情

                    });

                }).catch(() => {

                });
            },
            get_article() {
                let collection_id = this.collection_list[this.current_collection].id
                this.$axios.get(`${this.$settings.Host}/article/collection/${collection_id}/articles/`, {
                    headers: {
                        Authorization: "jwt " + this.token,
                    }
                }).then(response => {
                    this.article_list = response.data
                    this.editorTitle = this.article_list[this.current_article].title
                    this.editorContent = this.article_list[this.current_article].content || ""
                }).catch(errot => {
                        this.$message.error("网络异常获取失败")
                    }
                )
            },
            add_article(isnert) {
                let collection_id = this.collection_list[this.current_collection].id
                this.$axios.post(`${this.$settings.Host}/article/collection/${collection_id}/articles/`,
                    {
                        isnert,
                        title: this.article_title,

                    },
                    {
                        headers: {
                            Authorization: "jwt " + this.token,
                        },
                    }).then(response => {
                    this.$message.success("添加成功")
                    this.get_article()
                }).catch(
                    error => {
                        this.$message.error("添加失败")

                    })
            },
            delte_article(id) {
                let collection_id = this.collection_list[this.current_collection].id
                this.$axios.delete(`${this.$settings.Host}/article/${id}/`, {
                    headers: {
                        Authorization: "jwt " + this.token
                    }
                }).then(response => {
                    this.$message.success("删除成功")
                    this.get_article()
                }).catch(error => {
                    this.$message.error("删除失败")
                })
            },
            public_article(id) {
                this.$axios.patch(`${this.$settings.Host}/article/${id}/`, {}, {
                    headers: {
                        Authorization: "jwt " + this.token,
                    }
                }).then(response => {
                    this.$message.success(response.data.detail)
                    this.article_list[this.current_article].is_public = !this.article_list[this.current_article].is_public
                    if(this.article_list[this.current_article].is_public){
                        this.$router.push("/post")
                        localStorage.article_id = this.article_list[this.current_article].id
                        localStorage.article_title = this.article_list[this.current_article].title
                    }
                }).catch(error => {
                    this.$message.error(error.data.detail)
                })
            },
            move_article(a_id, c_id) {
                this.$axios.put(`${this.$settings.Host}/article/${a_id}/`, {
                    c_id: c_id
                }, {
                    headers: {
                        Authorization: 'jwt ' + this.token
                    }
                }).then(response => {
                    this.$message.success(response.data.detail)
                    this.get_article()
                }).catch(error => {
                        this.$message.error("移动失败")
                    }
                )
            },
            timeformat(time) {
                time = new Date(time);
                return `${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${time.getHours()}:${time.getMinutes()}`;
            },
            pub_time() {
                let time = this.timeformat(this.pub_date)
                let article = this.article_list[this.current_article].id
                this.$axios.patch(`${this.$settings.Host}/article/${article}/`, {
                    pub_time: time
                }, {
                    headers: {
                        Authorization: "jwt " + this.token
                    }
                }).then(response => {
                    this.$message.success(response.data.detail)
                    this.is_show_time_chose = false
                }).catch(error => {
                    this.$message.error(response.data.detail)
                })
            },
            save_article() {
                console.log("保存函数生效")
                let article_id = this.article_list[this.current_article].id
                if (this.editorContent == null) {
                    this.editorContent = "";
                }
                if (this.editorRender == null) {
                    this.editorRender = "";
                }
                this.$axios.put(`${this.$settings.Host}/article/save/${article_id}/`, {
                    title: this.editorTitle,
                    content: this.editorContent,
                    html_content: this.editorRender,
                }, {headers: {Authorization: "jwt " + this.token}}).then(response => {
                    console.log(1)
                }).catch(error => {
                    this.$message.error("网络故障")
                })
            },
            int_save_article(){
                console.log('定时器生效')
             // 延时保存文章内容
             clearTimeout(this.timmer); // 每次调用保存时，先把目前运行的定时器关闭，重新进行3秒倒计时
             this.timmer = setTimeout( this.save_article,3000);
          },
            change_content(content, html_content) {
                this.editorContent = content;
                this.editorRender = html_content;
                this.int_save_article()
            },
        },
        created() {
            this.check_user()
            this.show_collection_list()
        }
    }
</script>

<style scoped>
  body * {
    box-sizing: border-box;
  }

  .write {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
  }

  ._2v5v5 {
    position: relative;
    height: 100%;
    overflow-y: auto;
    background-color: #404040;
    color: #f2f2f2;
    z-index: 100;
    width: 13.66666667%;
    display: block;
    flex: 0 0 auto;
    float: left;
    padding-right: 0;
    padding-left: 0;
    min-height: 1px;
  }

  ._3zibT {
    padding: 30px 18px 5px;
    text-align: center;
    font-size: 14px;
  }

  ._3zibT a {
    display: block;
    font-size: 15px;
    padding: 9px 0;
    color: #ec7259;
    border: 1px solid rgba(236, 114, 89, .8);
    border-radius: 20px;
    -webkit-transition: border-color .2s ease-in;
    -o-transition: border-color .2s ease-in;
    transition: border-color .2s ease-in;
  }

  ._1iZMb {
    padding: 0 15px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
  }

  ._1iZMb ._33Zlg {
    cursor: pointer;
    color: #f2f2f2;
    transition: color .2s cubic-bezier(.645, .045, .355, 1);
    font-size: 14px;
  }

  ._1iZMb ._33Zlg .fa + span {
    margin-left: 4px;
  }

  ._1iZMb ._2G97m {
    overflow: hidden;
  }

  ._1iZMb ._2a1Rp {
    height: 85px;
    opacity: 1;
    margin-top: 10px;
    transition: all .2s ease-out;
    overflow: hidden;
  }

  ._1CtV4 {
    width: 100%;
    height: 35px;
    color: #ccc;
    background-color: #595959;
    border: 1px solid #333;
    padding: 4px 6px;
    font-size: 14px;
    line-height: 20px;
    outline: 0;
    overflow: visible;
    margin: 10px 0 0;
    margin-bottom: 10px;
  }

  ._3zXcJ {
    position: relative;
    display: inline-block;
    text-align: center;
    height: 30px;
    line-height: 20px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 500;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    white-space: nowrap;
    user-select: none;
    transition: all .2s cubic-bezier(.645, .045, .355, 1);
    text-transform: none;
    color: #42c02e;
    border-color: #42c02e;
    margin-left: 4px;
    background-color: #404040;
  }

  .vIzwB {
    color: #999;
    outline: 0;
  }

  ._1iZMb ._1mU5v {
    height: 0;
    opacity: 0;
    margin-top: 0;
  }

  ._1iZMb ._2a1Rp {
    height: 85px;
    opacity: 1;
    margin-top: 10px;
  }

  ._1iZMb ._1mU5v, ._1iZMb ._2a1Rp {
    transition: all .2s ease-out;
  }

  .vIzwB, .vIzwB:focus, .vIzwB:hover {
    background-color: #404040;
    border-color: transparent;
  }

  .dwU8Q {
    margin-left: 4px;
    background-color: #404040;
  }

  ._3t059 {
    position: relative;
    z-index: 0;
    background-color: #8c8c8c;
  }

  ._3MbJ4 {
    margin-bottom: 0;
  }

  ._3DM7w {
    position: relative;
    line-height: 40px;
    list-style: none;
    font-size: 15px;
    color: #f2f2f2;
    background-color: #404040;
    padding: 0 15px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  ._31PCv {
    background-color: #666;
    border-left: 3px solid #ec7259;
    padding-left: 12px;

  }

  ._3DM7w ._2VLy- {
    float: right;
  }

  ._3P4JX {
    font-size: 16px;
    width: 40px;
    text-align: center;
    position: relative;
    min-height: 30px;
    max-height: 50px;
  }

  ._3DM7w span {
    display: block;
    margin-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ._2w9pn {
    font-size: 14px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    list-style: none;
    background-color: #fff;
    color: #595959;
    border-radius: 6px;
  }

  ._3P4JX ul._2V8zt {
    display: none;
    position: absolute;
    z-index: 99;
    right: 0;
  }

  ._3P4JX ul._3FcHm {
    top: 100%;
  }

  ._2po2r {
    padding: 10px 20px;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    position: relative;
    border-bottom: 1px solid #d9d9d9;
  }

  ._3DM7w:hover, .JUBSP {
    background-color: #666;
  }

  .h-5Am {
    display: block;
    width: 13.66666667%;
    position: fixed;
    bottom: 0;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    padding-left: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 150;
    background-color: #404040;
  }

  .cRfUr {
    border-bottom: 1px solid #d9d9d9;
  }

  ._2po2r:last-child {
    border-radius: 0 0 4px 4px;
    border-bottom: 0;
  }

  ._2po2r:first-child {
    border-radius: 4px 4px 0 0;
  }

  ._2po2r ._22XWG {
    margin-right: 5px;
  }

  ._2po2r:hover {
    background-color: #666;
    color: #fff;
  }

  ._3DM7w span {
    display: block;
    margin-right: 20px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  ._3P4JX ul.NvfK4 {
    display: block;
  }

  ._3P4JX ul._2V8zt:before {
    position: absolute;
    right: 12px;
    content: "";
    display: inline-block;
  }

  ._3P4JX ul._3FcHm:before {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
    top: -9px;
  }

  .h-5Am .ant-dropdown-trigger {
    display: inline-block;
    color: #999;
    cursor: pointer;
    -webkit-transition: color .2s cubic-bezier(.645, .045, .355, 1);
    -o-transition: color .2s cubic-bezier(.645, .045, .355, 1);
    transition: color .2s cubic-bezier(.645, .045, .355, 1);
  }

  .h-5Am .fa + span {
    margin-left: 4px;
  }

  .h-5Am .Yv5Zx {
    float: right;
    margin-right: 15px;
    color: #999;
    cursor: pointer;
  }

  .h-5Am .Yv5Zx i {
    margin-left: 5px;
  }

  .rQQG7 {
    height: 100%;
    display: block;
    width: 33.33333%;
    border-right: 1px solid #d9d9d9;
  }

  ._3revO {
    overflow-y: scroll;
    height: 100%;
    position: relative;
  }

  ._3br9T {
    position: relative;
    transition: opacity .3s cubic-bezier(.645, .045, .355, 1);
    opacity: 1;
  }

  ._1GsW5 {
    line-height: 20px;
    font-size: 15px;
    font-weight: 400;
    padding: 20px 0 20px 25px;
    cursor: pointer;
    color: #595959;
  }

  ._1GsW5:hover {
    color: #262626;
  }

  ._2TxA- {
    position: relative;
    margin-bottom: 0;
    background-color: #efe9d9;
    border-top: 1px solid #d9d9d9;
  }

  ._25Ilv {
    position: relative;
    height: 90px;
    color: #595959;
    background-color: #fff;
    margin-bottom: 0;
    padding: 15px 10px 15px 60px;
    box-shadow: 0 0 0 1px #d9d9d9;
    border-left: 5px solid transparent;
    list-style: none;
    line-height: 60px;
    cursor: pointer;
    user-select: none;
  }

  ._25Ilv ._2m93u {
    background: url(/static/image/sprite.9d24217.png) no-repeat -50px -25px;
    background-size: 250px;
    position: absolute;
    top: 30px;
    left: 20px;
    width: 22px;
    height: 30px;
  }

  ._1tqbw, ._25Ilv:hover, ._33nt7 {
    background-color: #e6e6e6;
  }

  ._25Ilv ._2m93u {
    background: url(/static/image/sprite.9d24217.png) no-repeat -50px -25px;
    background-size: 250px;
    position: absolute;
    top: 30px;
    left: 20px;
    width: 22px;
    height: 30px;
  }

  ._3P4JX {
    font-size: 16px;
    width: 40px;
    text-align: center;
    position: relative;
    min-height: 30px;
    max-height: 50px;
  }

  ._25Ilv .poOXI {
    float: right;
  }

  ._33nt7 {
    border-left-color: #ec7259;
  }

  ._25Ilv .hLzJv, ._25Ilv .NariC {
    display: block;
    height: 30px;
    line-height: 30px;
    margin-right: 40px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-family: sans-serif;
  }

  ._2TxA- {
    position: relative;
    margin-bottom: 0;
    background-color: #efe9d9;
    border-top: 1px solid #d9d9d9;
  }

  ._3P4JX ul._2V8zt {
    display: none;
    position: absolute;
    z-index: 99;
    right: 0;
  }

  ._3P4JX ul._3FcHm {
    top: 100%;
  }

  ._2w9pn {
    font-size: 14px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    list-style: none;
    background-color: #fff;
    color: #595959;
    border-radius: 6px;
  }

  ._3P4JX ul.NvfK4 {
    display: block;
  }

  ._3P4JX ul._3FcHm:before {
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #fff;
    top: -9px;
  }

  ._3P4JX ul._2V8zt:before {
    position: absolute;
    right: 12px;
    content: "";
    display: inline-block;
  }

  ._25Ilv ._13kgp {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 22px;
    height: 30px;
    background: url(/static/image/sprite.9d24217.png) no-repeat 0 -25px;
    background-size: 250px;
  }

  ._25Ilv ._13kgp {
    position: absolute;
    top: 30px;
    left: 20px;
    width: 22px;
    height: 30px;
    background: url(/static/image/sprite.9d24217.png) no-repeat 0 -25px;
    background-size: 250px;
  }

  ._25Ilv ._2m93u {
    background: url(/static/image/sprite.9d24217.png) no-repeat -50px -25px;
    background-size: 250px;
  }

  ._25Ilv ._29C-V {
    position: absolute;
    bottom: 2px;
    left: 5px;
    font-size: 9px;
    line-height: 16px;
    color: #595959;
  }

  ._2cVn3 {
    line-height: 30px;
    padding: 20px 0 20px 25px;
    cursor: pointer;
    color: #999;
    margin-bottom: 80px;
  }

  ._24i7u {
    flex-shrink: 0;
    padding: 0 80px 10px 40px;
    margin-bottom: 0;
    border: none;
    font-size: 30px;
    font-weight: 400;
    line-height: 30px;
    box-shadow: none;
    color: #595959;
    background-color: transparent;
    outline: none;
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: 0;
    width: 66.666666%;
  }

  #editor {
    margin: auto;
    width: 66.666666%;
    position: absolute;
    right: 0;
    top: 44px;
    height: 580px;
  }

  ._2_WAp ._2KzJx, ._2_WAp ._3x4X_ {
    position: absolute;
    right: 100%;
    top: 0;
    display: none;
  }

  ._2_WAp:hover ._2KzJx, ._2_WAp:hover ._3x4X_ {
    display: block;
  }

  .interval_box {
    display: flex;
    height: 280px;
    width: 400px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: #fff;
    border-radius: 4px;
    z-index: 2000;
  }

  .NVdZF {
    display: block
  }

  ._20JYe {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: hsla(0, 0%, 100%, .7);
    height: 100%;
    z-index: 1000;
    filter: alpha(opacity=30)
  }

  body.reader-night-mode ._20JYe {
    background-color: hsla(0, 0%, 40%, .7)
  }

  ._3WS2u {
    display: none
  }

  ._23VW8 {
    position: fixed;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1010;
    -webkit-overflow-scrolling: touch;
    outline: 0
  }

  ._3cgNz {
    position: relative;
    background-color: #fff;
    width: auto;
    border: 0;
    border-radius: 6px;
    margin: 0 auto 24px;
    background-clip: padding-box;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2)
  }

  body.reader-night-mode ._3cgNz {
    background-color: #3d3d3d
  }

  .cjahm {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
  }

  .cjahm.move-up-appear.move-up-appear-active, .cjahm.move-up-enter.move-up-enter-active {
    -webkit-animation-name: _2oyZp;
    animation-name: _2oyZp
  }

  .cjahm.move-up-leave.move-up-leave-active {
    -webkit-animation-name: _3g8pf;
    animation-name: _3g8pf
  }

  ._2tIvb {
    position: relative;
    border-radius: 6px;
    background-color: #eee;
  }

  body.reader-night-mode ._2tIvb {
    background-color: #3d3d3d
  }

  .ZTNas {
    position: absolute;
    right: 0;
    top: 0;
    width: 48px;
    height: 48px;
    line-height: 46px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: #999;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease
  }

  .ZTNas:hover {
    color: #4d4d4d
  }

  ._1KgC3 {
    padding: 13px 16px;
    border-radius: 4px 4px 0 0;
    color: #595959;
    border-bottom: 1px solid #d9d9d9
  }

  body.reader-night-mode ._1KgC3 {
    border-color: #2e2e2e
  }

  .-K8Re {
    margin: 0;
    font-size: 16px;
    line-height: 21px;
    font-weight: 500;
    color: #4d4d4d
  }

  body.reader-night-mode .-K8Re {
    color: #b3b3b3
  }

  ._3O4M2 {
    font-size: 13px;
    padding-left: 10px;
    color: #999
  }

  ._3O4M2 a {
    color: #3294d0
  }

  .PWCkH {
    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: #595959
  }

  body.reader-night-mode .PWCkH {
    color: #b3b3b3
  }

  .pCffa {
    padding: 0 16px 16px;
    text-align: right;
    border-radius: 0 0 2px 2px
  }

  ._26mjB {
    display: block
  }

  .HhIYk {
    zoom: 1
  }

  .HhIYk:after, .HhIYk:before {
    content: " ";
    display: table
  }

  .HhIYk:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0
  }

  ._37SYn {
    font-size: 13px;
    line-height: 20px;
    padding: 30px 30px 20px;
    color: #333
  }

  body.reader-night-mode ._37SYn {
    color: #b3b3b3
  }

  ._2BmdS {
    padding: 0 16px 16px;
    text-align: right;
    border-radius: 0 0 2px 2px
  }

  ._26mjB .PWCkH {
    padding: 0;
    border-radius: 2px
  }

  ._26mjB .PWCkH a {
    color: #3194d0
  }

  ._26mjB .PWCkH a:active, ._26mjB .PWCkH a:hover {
    color: #2b86bc
  }

  ._26mjB ._38pIX {
    padding: 30px 16px;
    border: 0
  }

  ._26mjB ._38pIX input {
    display: block;
    border-radius: 4px;
    width: 100%;
    line-height: 20px;
    padding: 5px 10px;
    font-size: 15px;
    background-color: transparent;
    border: 1px solid #ccc
  }

  body.reader-night-mode ._26mjB ._38pIX input {
    border-color: #2e2e2e
  }

  ._26mjB .ZTNas {
    width: 32px;
    height: 32px;
    line-height: 32px
  }

  .HSpeJ .PWCkH {
    border: 0
  }
</style>
